<script setup>
import { computed, ref, watch } from 'vue';
import { FileTextOutlined, FileExcelOutlined } from '@ant-design/icons-vue';
import { useTaskAssign } from './api/use-task-assign.js';
import { useQuesAssign } from './api/use-ques-assign.jsx';
import { useFile } from './api/use-file.js';
import { useModel } from './api/use-model.js';
import { message } from 'ant-design-vue';
import { TxtToWords } from '@/util/index.js';

const props = defineProps(['id']);

const fileUrls = ref([]);
const fileTotal = computed(() => fileUrls.value.length);
const { loading, taskInfo, singlePackageNum, dataSource, main, submit } = useTaskAssign({ id: props.id, fileTotal });
const { controller, countUploaded, uploadFailedList } = useFile(props.id);
const { handleChangeXls, columns, isAssignedForAll } = useQuesAssign({ dataSource, fileList: fileUrls, fileTotal, countUploaded, uploadFailedList });
const { modelUrl } = useModel(props.id);

const quesAssignColumns = ref(
  columns.value.concat({
    title: '题包数',
    width: '6em',
    customRender: ({ record }) => R.compose( Math.ceil, R.divide(R.__, singlePackageNum.value), R.prop('fileNum') )(record),
  }),
);

main();

const loadURLs = R.compose(
  R.andThen(value => {
    fileUrls.value = value;
    countUploaded.value = fileUrls.value.length;
  }),
  TxtToWords
);
</script>

<template>
  <div class="task-assign">
    <a-spin :spinning="loading">
      <template v-if="taskInfo">
        <header>
          <h3>任务名称：{{ taskInfo?.taskName || '--' }}</h3>
          <a-button
            v-exist:task="'完成'"
            :disabled="!(0 < fileTotal)"
            type="primary"
            @click="() => submit({
              fileUrls,
              modelUrl: JSON.stringify(modelUrl),
            })">
            完成
          </a-button>
        </header>
        
        <div class="mod-bar">
          视频地址：
          <label>
            <input type="file" accept=".txt" hidden @change="loadURLs">
            <a-button
              type="link"
              :disabled="loading"
              @click="event => event.currentTarget.parentElement.click()">
              <template #icon><file-text-outlined /></template>
              导入
            </a-button>
          </label>
        </div>
      
        <div class="sub-bar">
          <a-form-item label="已上传">{{ fileTotal }}</a-form-item>
          <a-form-item label="单包题数">
            <a-input-number v-model:value="singlePackageNum" :min="20" :step="1"></a-input-number>
          </a-form-item>
      
          <a-button
            type="danger"
            @click="() => {
              controller.abort();
              message.info('已取消上传');
            }"
            style="margin-left: auto;">
            取消上传
          </a-button>
        </div>
      
        <div class="table-container">
          <template v-if="0 < fileTotal && !isAssignedForAll">
            <p class="for-all-tip">请为所有人分配题数</p>
          </template>
      
          <label>
            <input hidden type="file" accept=".xls,.xlsx" @change="handleChangeXls">
            <a-button
              type="link"
              :disabled="loading"
              @click="event => event.currentTarget.parentElement.click()">
              <template #icon><file-excel-outlined /></template>
              导入
            </a-button>
          </label>
          
          <a-table
            :pagination="false"
            row-key="userId"
            :data-source="dataSource"
            :columns="quesAssignColumns">        
          </a-table>
        </div>
      </template>
    </a-spin>
  </div>
</template>

<style>
.task-assign .mod-bar {
  display: flex;
  align-items: center;
  height: 32px;
  margin-bottom: 1em;
}

.task-assign .mod-bar .ant-upload-list-item { margin-top: 0; }
</style>

